<template>

	<view class="page">
		<!-- 自定义导航栏 -->
		<view>
			<u-navbar :autoBack="true" bgColor="#252928" safeAreaInsetTop placeholder="true">
				<view style="display: flex;" class="u-nav-slot" slot="left">
					<u-icon color="#ffffff" name="arrow-left" size="19"></u-icon>
					<view style="font-size: 36rpx;margin-left: 20rpx;">个人信息</view>

				</view>
			</u-navbar>
		</view>
		<u-cell-group>
			
		
	
			<view class="ingo-cell" @click="Setname(1)" style="position: relative;" >
				<view >
					<view class="zi" style="position: absolute; top: 24rpx;left: 560rpx;">
						<u-avatar src="https://img.xieling.top/test.png"></u-avatar>
					</view>
					<u-cell style=" margin-top: 15rpx;" :titleStyle="titleStyle"
						:rightIconStyle="rightIconStyle" size="large" title="头像" isLink
						:border="false"></u-cell>
				</view>
				
					
			</view>
			
			<view class="ingo-cell" @click="Setname(2)">
				<u-cell style=" margin-top: 15rpx;" :titleStyle="titleStyle"
					:rightIconStyle="rightIconStyle" size="large" title="昵称" value="藏家_10086" isLink
					:border="false"></u-cell>
			</view>
		</u-cell-group>
		
		<u-popup :show="show" mode="bottom" :round="10" bgColor="#1e201f" @close="close" @open="open">
			<view>
				<view class="t">
					拍摄
				</view>
				<view class="t" style="margin-bottom: 10rpx;border-radius: 0rpx 0rpx 0 0">
					从手机相册选择
				</view>

				<view @click="close" class="t" style="border-radius: 0rpx 0rpx 0 0">
					取消
				</view>
			</view>
		</u-popup>
		<!-- //改名 -->
		<u-popup :show="show1" mode="center" :round="10" bgColor="#1e201f">
			<view class="info-name">
				<view style="margin-top: 4rpx; height: 80rpx ;line-height: 80rpx; text-align: center;font-weight: 600;">
					修改昵称
				</view>
				<view style="margin-top: 0rpx; height: 80rpx ;line-height: 80rpx; text-align: center;font-weight: 600;">
					原昵称:{{info.name}}
				</view>
				<u--input placeholder="支持2-16位中英文,数字" border="none" :v-model="value" color="#ffffff"
					></u--input>
				<view class="" style="border-top: 1px solid #353938;margin-top: 40rpx; display: flex;">
					<view @click="close(2)" class=""
						style="width: 50%; text-align: center;height: 100rpx; line-height: 100rpx; border-right: 1px solid #353938;">
						取消
					</view>
					<view @click="confirm" class=""
						style="width: 50%; text-align: center;height: 100rpx; line-height: 100rpx;">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: 0,
				show1: 0,
				value: '',
				src: 'https://img.xieling.top/test.png',
				info: {
					name: 'ninni',
					phone: '1234588262'
				},

				titleStyle: {
					color: '#ffffff',


				},
				rightIconStyle: {
					color: '#626463'
				},
				customStyle: {
					wight: '500rpx',
					color: 'red'
				}
			}
		},
		onLoad(e) {
			console.log(e)
			this.info.name = e.name,
				this.info.phone = e.phone
				
		},
		methods: {
			Setname(e) {
				console.log(e)
				if (e == 1) {
					this.show = 1
				}
				if (e == 2) {
					this.show1 = 1
				}
			},
			confirm() {
				console.log("确定")
				this.show1 = 0

			},
			open() {
				// console.log('open');
			},
			close(e) {
				this.show = 0
				if (e == 2) {
					this.show1 = 0
				}
				// console.log('close');
			}

		}
	}
</script>

<style scoped>
	.page {}
>>>.u-input{
	width: 80%;
	padding: 10rpx 0rpx; 
	margin: 0px auto;
	background-color: #353938;
}
>>>.u-input__content{
	
	padding: 10rpx 20rpx; 
	
}
	>>>.u-line {
		border: none !important;
	}

	>>>.u-cell__body--large {
		padding-top: 40rpx !important;
	}
	>>>.u-cell--clickable{
			background-color: #3c3f3d!important;
			border-radius: 50rpx;
		}
		
	.info-name {
		width: 600rpx;
	}

	.ingo-cell {
		height: 120rpx;
		background-color: #3c3f3d;
		border-radius: 25rpx;
		width: 95%;
		margin: 0px auto;
		margin-top: 50rpx;

	}

	.t {
		font-size: 32rpx;
		background-color: #282a29;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 20rpx 20rpx 0 0;
		border-bottom: 2px solid #1e201f;
	}
</style>
